<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" alt="">
          <div class="userInfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login_info">
          <p>上次登录时间: <span>2021-7-49</span> </p>
          <p>上次登录地点: <span>曲靖</span> </p>
        </div>
      </el-card>
      <el-card style="height:470px;margin-top:20px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column show-overflow-tooltip v-for="(val,key) in tableLabel" :key="key" :prop="key" :label="val">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="num">
        <el-card v-for="item in countData" :key="item.name" shadow="hover" :body-style="{display:'flex',padding:0}">
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
          <div class="detail">
            <p class="num">${{item.value}}</p>
            <p class="txt">${{item.name}}</p>
          </div>
        </el-card>
      </div>
      <el-card shadow="hover" style="hight:280px">1 </el-card>
      <div class="graph">
        <el-card shadow="hover" style="hight:280px">1
        </el-card>
        <el-card shadow="hover" style="hight:280px">1
        </el-card>
      </div>

    </el-col>
  </el-row>
</template>

<script>
import { getMenu } from '@/api/data.js'
export default {
  name: 'Home',
  data () {
    return {
      userImg: require('@/assets/logo.png'),
      tableData: [
        {
          name: 'oppo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 8000005454
        },
        {
          name: 'vivo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: 'huawei',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        }
      ],
      tableLabel: {
        name: '课程',
        todayBuy: '今日购买',
        monthBuy: '本月购买',
        totalBuy: '总购买'
      },
      countData: [
        {
          name: '今日支付订单',
          value: 1234,
          icon: 'success',
          color: '#2ec7c9'
        },
        {
          name: '今日收藏订单',
          value: 1234,
          icon: 'plus',
          color: '#ffb980'
        },
        {
          name: '今日未支付订单',
          value: 1234,
          icon: 's-goods',
          color: '#5ab1ef'
        },
        {
          name: '本月支付订单',
          value: 1234,
          icon: 'success',
          color: '#2ec7c9'
        },
        {
          name: '本月收藏订单',
          value: 1234,
          icon: 'edit',
          color: '#ffb980'
        },
        {
          name: '本月未支付订单',
          value: 1234,
          icon: 's-goods',
          color: '#5ab1ef'
        }
      ]
    }
  },
  mounted () {
    getMenu().then(res => {
      console.log(res)
    })
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-top: 20px;
}
.user {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  padding-bottom: 20px;
  img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: #ccc;
  }
}
.login_info {
  span {
    margin-left: 50px;
  }
}
.num {
  padding: 0;
  margin: 0;
  width: 100%;
  .el-card {
    display: inline-block;
    width: 30%;
    margin: 0 10px;
    // padding: 0 10px;
    box-sizing: border-box;
    .detail {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      width: 100%;
      text-align: center;
      .num {
        font-weight: 900;
        font-size: 24px;
      }
      .txt {
        color: #838383;
      }
    }
    i {
      display: block;
      width: 80px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      color: #fff;
      font-size: 24px;
    }
  }
}
</style>
